<template>
  <div class="big_box">
    <!-- 左边大框 -->
    <div class="box_left">
      <!-- 小女孩 -->
      <img class="Girl" src="https://img.wilmer.com.cn/admin/2024/%E5%B0%8F%E5%AD%A9%E5%A5%B3%201.png" alt="">
       <!-- 五个选项 -->
      <div class="tag tag_one" @click="dit(0)">
        <img src="https://img.wilmer.com.cn/admin/2024/Group%20625878.png" alt="">
        <div class="txt_one">Low</div>
        <div class="txt_two">pressure</div>
      </div>
      <div class="tag tag_two" @click="dit(1)">
        <img src="https://img.wilmer.com.cn/admin/2024/%E9%A5%AE%E6%B0%B4.png" alt="">
        <div class="txt_one">680</div>
        <div class="txt_two">ML</div>
      </div>
      <div class="tag tag_three" @click="dit(2)">
        <img src="https://img.wilmer.com.cn/admin/2024/%E5%BF%83.png" alt="">
        <div class="txt_one">65</div>
        <div class="txt_two">mins</div>
      </div>
      <div class="tag tag_four" @click="dit(3)">
        <img class="img_T" src="https://img.wilmer.com.cn/admin/2024/Group%20625877.png" alt="">
        <div class="txt_one">36.6</div>
        <div class="txt_two">℃</div>
      </div>
      <div class="tag tag_five" @click="dit(4)">
        <img src="https://img.wilmer.com.cn/admin/2024/%E7%AF%AE%E7%90%83.png" alt="">
        <div class="txt_one">1234</div>
        <div class="txt_two">steps</div>
      </div>
    </div>
    <!-- 右边五个 -->
    <div class="box_right">
      <div :class="flag == 0 ? 'Plan_A' : 'Plan_B'" class="one">
        <div class="long" v-if="flag==0">
          <img src="https://img.wilmer.com.cn/admin/2024/Emoji.png" alt="">
          <span class="tit">压力</span>
        </div>
        <div class="short" v-if="flag!==0">Pressure</div>
        <div id="main"></div>
      </div>

      <div :class="flag == 1 ? 'Plan_A' : 'Plan_B'" class="two">
        <div class="long" v-if="flag==1">
          <img src="https://img.wilmer.com.cn/admin/2024/Emoji%20%281%29.png" alt="">
          <span class="tit">饮水量</span>
        </div>
        <div class="short" v-if="flag!==1">Drinking Water</div>
        <div id="main_two"></div>
      </div>

      <div :class="flag == 2 ? 'Plan_A' : 'Plan_B'" class="three">
        <div class="long" v-if="flag==2">
          <img src="https://img.wilmer.com.cn/admin/2024/Emoji%20%282%29.png" alt="">
          <span class="tit">心率</span>
        </div>
        <div class="short" v-if="flag!==2">Heart Rate</div>
        <div id="main_three"></div>
      </div>

      <div :class="flag == 3 ? 'Plan_A' : 'Plan_B'" class="four">
        <div class="long" v-if="flag==3">
          <img src="https://img.wilmer.com.cn/admin/2024/Emoji%20%283%29.png" alt="">
          <span class="tit">体温</span>
        </div>
        <div class="short" v-if="flag!==3">Body Temperature</div>
        <div id="main_four"></div>
      </div>

      <div :class="flag == 4 ? 'Plan_A' : 'Plan_B'" class="five">
        <div class="long" v-if="flag==4">
          <img src="https://img.wilmer.com.cn/admin/2024/Emoji%20%284%29.png" alt="">
          <span class="tit">步数</span>
        </div>
        <div class="short" v-if="flag!==4">Steps</div>
        <div id="main_five"></div>
      </div>
    </div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/grid');
require('echarts/lib/chart/line');
export default {
  data() {
    return {
      flag: 0
    };
  },
  mounted() {
    this.echartsA()
    this.echartsB()
    this.echartsC()
    this.echartsD()
    this.echartsE()
  },
  
  methods: {
    // 打开详细
    dit(i){
      this.flag=i
    },
    echartsA() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [480, 670, 710, 830, 920],
            type: 'line',
            smooth: true
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 2
    echartsB() {
      var chartDom = document.getElementById('main_two');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [480, 570, 610, 870, 920],
            type: 'line',
            smooth: true
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 3
    echartsC() {
      var chartDom = document.getElementById('main_three');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [80, 91, 83, 90, 88],
            type: 'line',
            smooth: true
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 4
    echartsD() {
      var chartDom = document.getElementById('main_four');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [37, 37.5, 36.8, 37.1, 36.9],
            type: 'line',
            smooth: true
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 5    
    echartsE() {
      var chartDom = document.getElementById('main_five');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [480, 1200, 1450, 1789, 2699],
            type: 'line',
            smooth: true
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
#main {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  transform: translateY(-50px);
}
#main_two {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  transform: translateY(-50px);
}
#main_three {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  transform: translateY(-50px);
}
#main_four {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  transform: translateY(-50px);
}
#main_five {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  transform: translateY(-50px);
}
.big_box {
  display: flex;
  background-image: url('https://img.wilmer.com.cn/admin/2024/%E6%9C%AA%E5%91%BD%E5%90%8D%E4%BD%9C%E5%93%81%201.png');
  background-size: 100% 100%;
}

.box_left {
  width: 670px;
  height: 625px;
  background-color: #46ACBA;
  margin: 101px 72px 43px 122px;
  border-radius: 37px;
  position: relative;

  .Girl {
    position: absolute;
    width: 342px;
    height: 566px;
    top: 28px;
    left: 85px;
  }

  .tag {
    background-color: #D4ECEF;
    border-radius: 14px;
    position: absolute;
    padding: 8px 16px;
    padding-top: 10px;
    text-align: center;

    .img_T {
      width: 13px;
      height: 26px;
    }

    img {
      width: 25px;
      height: 25px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -18px);
    }

    .txt_one {
      font-size: 20px;
    }

    .txt_two {
      font-size: 10px;
    }
  }

  .tag_one {
    top: 58px;
    right: 121px;
  }

  .tag_two {
    top: 168px;
    right: 91px;
  }

  .tag_three {
    top: 278px;
    right: 70px;
  }

  .tag_four {
    top: 388px;
    right: 91px;
  }

  .tag_five {
    top: 498px;
    right: 121px;
  }
}

.box_right {
  margin-top: 66px;

  .Plan_A {
    width: 362px;
    height: 334px;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    margin-top: 35px;

    .long {
      img {
        width: 76px;
        height: 76px;
        margin-top: 12px;
        margin-left: 26px;
      }
      .tit{
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        position: absolute;
        top: 22px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .Plan_B{
    overflow: hidden;
    width: 362px;
    height: 38px;
    border-radius: 24px;
    transition: all 0.5s;
    margin-top: 35px;
    .short{
      color: #FFFFFF;
      line-height: 38px;
      margin-left: 28px;
    }
  }
}

.one{
  background-color: #E6A363;
}
.two{
  background-color: #67C1BC;
}
.three{
  background-color: #B38181F0;
}
.four{
  background-color: #90C6CD;
}
.five{
  background-color: #8EA2A1;
}
</style>
















































<!-- <template>
  <div style="background: #f5f7fa">
    <el-row :gutter="40" style="margin: 0 20px">
      <el-col :span="13">
        <div class="Box">
          <div class="titleFirst">
            <div class="left">小爱同学的饮水量</div>
            <div class="right">
              <el-radio-group v-model="radio">
                <el-radio :label="3">今日饮水量</el-radio>
                <el-radio :label="6">本周饮水量</el-radio>
                <el-radio :label="9">本月饮水量</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="contentBox" id="drinkingWater"></div>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="Box">
          <div class="titleFirst">
            <div class="left">小爱同学的心率检测</div>
          </div>
          <div class="contentBox" id="heartRate"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" style="margin: 50px 20px 0">
      <el-col :span="14">
        <div class="Box">
          <div class="titleFirst">
            <div class="left">小爱同学的体温</div>
            <div class="right">
              <el-radio-group v-model="radio">
                <el-radio :label="3">今日体温</el-radio>
                <el-radio :label="6">本周体温</el-radio>
                <el-radio :label="9">本月体温</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="contentBox"></div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="Box">
          <div class="titleFirst">
            <div class="left">小爱同学的步数</div>
            <div class="right">
              <el-radio-group v-model="radio">
                <el-radio :label="3">今日步数</el-radio>
                <el-radio :label="6">本周步数</el-radio>
                <el-radio :label="9">本月步数</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="contentBox"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/dataset");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");
require("echarts/lib/chart/bar");

export default {
  data() {
    return {
      radio: "",
    };
  },
  mounted() {
    this.Getdrinking();
  },
  methods: {
    Getdrinking() {
      var chartDom = document.getElementById("drinkingWater");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        grid: {
          bottom: 40,
        },
        legend: {
          top: 20,
          right: 20,
          itemWidth: 18,
          itemHeight: 18,
          icon: "circle",
          textStyle: {
            color: "#718EBF",
            fontSize: 18,
            fontWeight: 400,
            fontFamily: "PingFang SC, PingFang SC",
          },
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "今日喝水量", "昨日喝水量"],
            ["9:00-10:00", 43.3, 85.8],
            ["10:00-11:00", 83.1, 73.4],
            ["11:00-12:00", 86.4, 65.2],
            ["14:00-15:00", 72.4, 53.9],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {
          type: "value",
          name: "单位：ml",
          position: "left",
          nameTextStyle: {
            color: "#718EBF", // 坐标轴名称的颜色
            fontWeight: 400, // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "18", // 文字字体大小
          },
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#718EBF",
              fontStyle: 16,
              fontWeight: 400,
              fontFamily: "PingFang SC, PingFang SC",
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#FDAA0A", // 设置柱状图颜色
              borderRadius: 8, // 设置圆角
            },
          },
          {
            type: "bar",
            itemStyle: {
              color: "#16DBCC", // 设置柱状图颜色
              borderRadius: 8, // 设置圆角
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    GetRate(){
      
    }
  },
};
</script>

<style scoped lang="scss">
.Box {
  .titleFirst {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24px;
      color: #343c6a;
    }
    .right {
    }
  }

  .contentBox {
    width: 100%;
    height: 398px;
    background: #ffffff;
    border-radius: 28px;
    margin-top: 20px;
  }
}

::v-deep .Box .titleFirst .right .el-radio__label {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #718ebf;
}
</style> -->
